import 'package:flutter/material.dart';
import 'package:flutter_aggregate/model/plant/constants.dart';
import 'package:flutter_aggregate/router/app_routers.dart';
import 'package:get/get.dart';

class RecomendsPlants extends StatelessWidget {
  const RecomendsPlants({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: [
          RecomendPlantCard(
            image: 'assets/plant/images/image_1.png', 
            title: 'Sanabtha', 
            country: 'Russia', 
            price: 440, 
            press: () {
              Get.toNamed('${AppRouters.plantHome}${AppRouters.plantDetail}');
            }
          ),
          RecomendPlantCard(
            image: 'assets/plant/images/image_2.png', 
            title: 'Sanabtha', 
            country: 'Russia', 
            price: 440, 
            press: () {
              Get.toNamed('${AppRouters.plantHome}${AppRouters.plantDetail}');
            }
          ),
          RecomendPlantCard(
            image: 'assets/plant/images/image_3.png', 
            title: 'Sanabtha', 
            country: 'Russia', 
            price: 440, 
            press: () {
              Get.toNamed('${AppRouters.plantHome}${AppRouters.plantDetail}');
            }
          ),
        ],
      ),
    );
  }
}

class RecomendPlantCard extends StatelessWidget {
  const RecomendPlantCard({
    Key? key, 
    required this.image, 
    required this.title, 
    required this.country, 
    required this.price, 
    required this.press,
  }) : super(key: key);

  final String image, title, country;
  final int price;
  final VoidCallback press;

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return GestureDetector(
      onTap: press,
      child: Container(
        margin: const EdgeInsets.only(
          left: palntKDefaultPadding,
          top: palntKDefaultPadding / 2,
          bottom: palntKDefaultPadding * 2
        ),
        width: size.width * .4,
        child: Column(
          children: [
            Image.asset(image),
            Container(
              padding: const EdgeInsets.all(palntKDefaultPadding / 2),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: const BorderRadius.vertical(
                  bottom: Radius.circular(10)
                ),
                boxShadow: [
                  BoxShadow(
                    offset: const Offset(0, 10),
                    blurRadius: 50,
                    color: palntKPrimaryColor.withOpacity(0.23)
                  )
                ]
              ),
              child: Row(
                children: [
                    RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                          text: '$title\n'.toUpperCase(),
                          style: Theme.of(context).textTheme.button
                        ),
                        TextSpan(
                          text: country.toUpperCase(),
                          style: TextStyle(
                            color: palntKPrimaryColor.withOpacity(.5)
                          )
                        )
                      ]                          
                    )
                  ),
                  const Spacer(),
                  Text(
                    '\$$price',
                    style: Theme.of(context)
                    .textTheme
                    .button
                    !.copyWith(
                      color: palntKPrimaryColor
                    )
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
